<template>
    <div>
        <el-table style="width: 100%;margin-bottom: 20px;" :cell-style="{padding:'5px 0'}" border default-expand-all
                  :data="tableData" row-key="id" :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
            <el-table-column prop="id" label="ID" width="130"></el-table-column>
            <el-table-column label="名称" width="120">
                <template slot-scope="scope">
                    <el-link type="primary" :icon="scope.row.icon" @click="handleEdit(scope.$index, scope.row)">{{scope.row.name}}</el-link>
                </template>
            </el-table-column>
            <el-table-column prop="type" label="类型" width="50">
                <template slot-scope="scope">
                    {{scope.type==="dir"?"目录":(scope.type==="btn"?"按钮":"菜单")}}
                </template>
            </el-table-column>
            <el-table-column prop="url" label="url" min-width="400"></el-table-column>
            <el-table-column prop="sort" label="权限码" width="100"></el-table-column>
            <el-table-column prop="sort" label="排序" width="50"></el-table-column>
            <el-table-column label="状态" width="50">
                <template slot-scope="scope">
                    <el-switch @click.native="form=scope.row"
                            v-model="scope.row.enabled" active-value="Y" inactive-value="N" active-color="#13ce66" inactive-color="#ff4949" :width=30>
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="120">
                <template slot-scope="scope">
                    <el-link type="primary" icon="el-icon-edit-outline" @click="handleEdit(scope.$index, scope.row)">编辑</el-link>
                    <el-link type="danger" icon="el-icon-circle-plus-outline" @click="handleDelete(scope.$index, scope.row)">下级</el-link>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="编辑菜单" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="ID" label-width="40px">
                            <el-input v-model="form.id" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="名称" label-width="40px">
                            <el-input v-model="form.name" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="有效" label-width="40px">
                            <el-switch v-model="form.enabled"
                                       active-value="Y" inactive-value="N" active-color="#13ce66" inactive-color="#ff4949">
                            </el-switch>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="8">
                        <el-form-item label="图标" label-width="40px">
                            <el-input v-model="form.icon" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="预览" label-width="40px">
                            <div style="background: #E4E7ED;text-align:center;"><i :class="form.icon"></i></div>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="排序" label-width="40px">
                            <el-input v-model="form.sort" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <el-form-item label="url" label-width="40px">
                            <el-input v-model="form.url" autocomplete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    $.define('common/util.js',function (util) {
        return {
            mounted() {
                let vm=this;
                $.api.menuList().then(function (res) {
                    let ret = res.data;
                    if (ret.ok) {
                        vm.tableData=util.listToTree(ret.data,"id","pid",1000);
                    } else {
                        layer.msg(ret.msg);
                    }
                });
            },
            data() {
                return {
                    tableData: [],
                    form:{},
                    dialogFormVisible: false
                }
            },
            methods:{
                handleEdit(index,row){
                    this.dialogFormVisible=true;
                    this.form=$.extend(true, {}, row);
                }
            }
        };
    });
</script>